<template>
  <div id="home">
    <el-row>
      <el-col :style="mystyle">
        <h1><i class="index_icon index_icon_cygn"></i>全部功能</h1>
        <ul v-if="!isAdmin" class="grouplist">
          <li>
            <i class="el-icon- icon iconfont icon_xtsy"></i>
            <div>
              <span><router-link :to="{ name: 'Home' }" exact>系统首页</router-link></span>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_jcxx"></i>
            <div>
              <span>基础信息</span>
              <router-link :to="{ name: 'Dept' }" exact>1、机构编制</router-link>
              <router-link :to="{ name: 'Person' }" exact>2、干部信息</router-link>
              <!-- <router-link :to="{ name: 'Mingce' }" exact disabled="disabled">3、名册管理</router-link> -->
              <router-link :to="{ name: 'PersonList' }" exact>3、单位名册</router-link>
              <!-- <router-link :to="{ name: 'Building' }" exact>4、干部档案</router-link> -->
              <span class="disable">4、干部档案</span>
              <router-link :to="{ name: 'Zhidu' }" exact>5、人事制度</router-link>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_gbxr"></i>
            <div>
              <!-- <span><router-link :to="{ name: 'Building' }" exact>干部选任</router-link></span> -->
              <span class="disable1">干部选任</span>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_jypx"></i>
            <div>
              <!-- <span>教育培训</span> -->
              <span class="disable1">教育培训</span>
              <!-- <router-link :to="{ name: 'Building' }" exact>1、干部素质体系</router-link> -->
              <span class="disable">1、干部素质体系</span>
              <!-- <router-link :to="{ name: 'Building' }" exact></router-link> -->
              <span class="disable">2、干部培训</span>
              <!-- <router-link :to="{ name: 'Building' }" exact>3、培养计划</router-link> -->
              <span class="disable">3、培养计划</span>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_rcgl"></i>
            <div>
              <!-- <span>日常管理</span>
              <router-link :to="{ name: 'Shenghuohui' }" exact>1、民主生活会</router-link>
              <router-link :to="{ name: 'Building' }" exact>2、干部考核</router-link>
              <router-link :to="{ name: 'Building' }" exact>3、综合分析研判</router-link> -->
              <span class="disable1">日常管理</span>
              <span class="disable">1、民主生活会</span>
              <router-link :to="{ name: 'Assess' }" exact v-if="inRoles('ROLE_kaohe')||inRoles('ROLE_admin')">2、干部考核</router-link>
              <span class="disable" v-else>2、干部考核</span>
              <span class="disable">3、综合分析研判</span>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_gbjd"></i>
            <div>
              <!-- <span>干部监督</span>
              <router-link :to="{ name: 'Building' }" exact>1、工作监督</router-link>
              <router-link :to="{ name: 'Building' }" exact>2、干部监督</router-link> -->
              <span class="disable1">干部监督</span>
              <span class="disable">1、工作监督</span>
              <span class="disable">2、干部监督</span>
            </div>
          </li>
          <li>
            <i class="el-icon- icon iconfont icon_rcjs"></i>
            <div>
              <!-- <span>人才建设</span>
              <router-link :to="{ name: 'Building' }" exact>1、基本情况</router-link>
              <router-link :to="{ name: 'Building' }" exact>2、人才规划</router-link>
              <router-link :to="{ name: 'Building' }" exact>3、服务专家</router-link> -->
              <span class="disable1">人才建设</span>
              <span class="disable">1、基本情况</span>
              <span class="disable">2、人才规划</span>
              <span class="disable">3、服务专家</span>
            </div>
          </li>
        </ul>
        <ul v-else class="grouplist">
          <li>
            <i class="el-icon- icon iconfont icon_setting"></i>
            <!-- <div>
              <span>系统维护</span>
              <router-link :to="{ name: 'User' }" exact v-if="inRoles('ROLE_admin')">用户管理</router-link>
              <router-link :to="{ name: 'ImportLog' }" exact v-if="inRoles('ROLE_admin')">数据更新日志</router-link>
              <router-link :to="{ name: 'DeptImport' }" exact v-if="inRoles('ROLE_admin')||inRoles('ROLE_basicdata')">基础数据维护</router-link>
              <router-link :to="{ name: 'ZhiduImport' }" exact v-if="inRoles('ROLE_admin')||inRoles('ROLE_zhidudata')">人事制度维护</router-link>
              <router-link :to="{ name: 'IpList' }" exact v-if="inRoles('ROLE_admin')">人事司IP白名单维护</router-link>
              <router-link :to="{ name: 'Log' }" exact v-if="inRoles('ROLE_admin')">安全审计</router-link>
            </div> -->
            <div>
              <span>系统维护</span>
              <router-link :to="{ name: 'User' }" exact v-if="inRoles('ROLE_admin_right')">用户管理</router-link>
              <router-link :to="{ name: 'ImportLog' }" exact v-if="inRoles('ROLE_admin_audit')||inRoles('ROLE_admin_sys')">数据更新日志</router-link>
              <router-link :to="{ name: 'DeptImport' }" exact v-if="inRoles('ROLE_admin_sys')">基础数据维护</router-link>
              <router-link :to="{ name: 'ZhiduImport' }" exact v-if="inRoles('ROLE_admin_sys')">人事制度维护</router-link>
              <router-link :to="{ name: 'IpList' }" exact v-if="inRoles('ROLE_admin_right')">人事司IP白名单维护</router-link>
              <router-link :to="{ name: 'Log' }" exact v-if="inRoles('ROLE_admin_audit')">安全审计</router-link>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mystyle: 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + 700 + 'px',
      userRoles: '',
      isAdmin: false
    }
  },
  methods: {
    mainheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.mystyle = 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + (clientHeight - 150) + 'px'
    },
    inRoles (str) {
      let arr = this.userRoles
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    }
  },
  mounted () {
    // this.mainheight(this)
    // let _this = this
    // window.onresize = function windowResize () {
    //   // 通过捕获系统的onresize事件触发我们需要执行的事件
    //   _this.mainheight(_this)
    // }
    this.userRoles = JSON.parse(localStorage.getItem('Roles'))
    console.log(this.userRoles)
    if (this.inRoles('ROLE_admin_audit') || this.inRoles('ROLE_admin_sys') || this.inRoles('ROLE_admin_right')) {
      this.isAdmin = true
    } else {
      this.isAdmin = false
    }
  }
}
</script>
<style scoped>
h1{
  color:#206ab7;
  font-size:18px;
  line-height: 36px;
}
.index_icon{
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.index_icon_cygn{
  background:url(./assets/index_icon_cygn.png);
}
.grouplist li{
  list-style: none;
  font-family: '宋体';
  font-size:var(--size16);
  border-bottom: 1px solid #EBEEF5;
  margin-right:40px;
  overflow: hidden;
  padding:20px 0 15px 15px;
}
.grouplist li i{
  float:left;
}
.grouplist li div{
  float:left;
  line-height:38px;
  font-weight: bolder;
  padding: 0 0 0 10px;
}
.grouplist li div span a{
  font-weight: bolder;
  text-decoration: none;
  padding: 0;
}
.grouplist li div a{
  color:#000;
  font-weight: normal;
  text-decoration: none;
  padding: 0 0 0 30px;
}
.grouplist li div span.disable{
    color: #999;
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 30px;
}
.grouplist li div span.disable1{
    color: #999;
}
.grouplist li div a:hover{
  color: #f60;
  text-decoration:underline;
}
</style>
